/**
 * FreeTable
 * @author: tongsitong
 */

import { Table } from "antd";
import styled, { css } from "styled-components";

interface FreeTableProps {
  columns: any[];
  onChange?: (pagination: any, filter: any, sorter: any, extra: any) => void;
  dataSource: any;
  className?: any;
  scroll?: object;
  rowSelection?: any;
  bordered?: boolean;
  loading?: boolean;
  style?: any;
  showSizeChanger?: boolean;
  pageSizeOptions?: any;
  pagination?: any;
  notShowPagination?: boolean;
  rowKey?: any;
}

const list_table = css`
  .ant-table-content {
    border: solid 1px #ced7e8;
    > table {
      border: none !important;
    }
  }

  // 表头
  .ant-table-thead > tr {
    height: 38px;

    > th {
      background: #E0E4EC;
      padding: 0 8px !important;
      border-right: 1px solid #ced7e8 !important;
      color: #35425e;
      font-size: 13px;
      font-weight: bold;
      line-height: 15px;
      border-bottom: 1px solid #ced7e8;
    }

    > th:last-child {
      border-right: unset !important;
    }
  }

  .ant-table-tbody > tr {
    height: 38px;

    &:last-child {
      td {
        border-bottom: unset;
      }
    }

    > td {
      padding: 0 8px !important;
      // border-right: none !important;
      border-right: 1px solid #ced7e8 !important;
      text-align: left;
      height: 38px;
      color: #35425e;
      font-size: 13px;
      border-bottom: 1px solid #ced7e8;
    }

    > td:last-child {
      border-right: unset !important;
    }

    &:nth-child(2n) {
      background: #fff;

      > .ant-table-cell-fix-left {
        background: inherit;
      }
    }

    &:nth-child(2n + 1) {
      background: #f5f6f9;

      > .ant-table-cell-fix-left {
        background: inherit;
      }
    }
  }

  .ant-table-tbody > tr.ant-table-row:hover > td {
    background: #e5f0ff;
  }

  .ant-table-tbody > tr.ant-table-row-selected > td {
    background-color: transparent;
  }

  // 普通table
  .ant-table-tbody {
    > tr {
      > td {
        > a {
          font-size: 13px !important;
          color: #1f51a4;

          &:hover {
            color: #4374c5;
          }

          &:active {
            color: #0d3d8d;
          }
        }
      }
    }
  }

  // 解决排序增高问题
  .ant-table-column-sorters {
    padding: 0;
  }
`;

const table_header_center = css`
  .ant-table-thead > tr > th {
    text-align: center !important;
  }
`;

const TotalButton = styled.div`
  position: absolute;
  left: 0;
  color: #35425e;
  font-size: 13px;
`;

const GoPageButton = styled.button`
  height: 24px;
  width: 62px;
  background-color: #e8eaf3;
  border-radius: 14px;
  font-size: 13px;
  color: #1f51a4;
  border: none;
  margin-left: 7px;
  line-height: 10px;
  &:hover {
    background: #f3f5fb;
  }
  &:active {
    background: #d7daeb;
  }
`;

const Content = (props: FreeTableProps) => {
  const {
    columns,
    onChange,
    dataSource,
    className,
    scroll,
    rowSelection,
    bordered = true, // 带分割线
    loading,
    style,
    pagination,
    notShowPagination,
    rowKey,
    ...restProps
  } = props;

  const changeTable = (pagination, filters, sorter, extra) => {
    onChange && onChange(pagination, filters, sorter, extra);
  };
  return (
    <Table
      className={className}
      style={style}
      columns={columns}
      dataSource={dataSource?.records || []}
      bordered={bordered}
      rowSelection={rowSelection}
      rowKey={rowKey ? rowKey : (k: any, i: any) => `${i}`}
      onChange={changeTable}
      pagination={
        notShowPagination
          ? !notShowPagination
          : pagination
          ? pagination
          : {
              // 分页
              current: dataSource?.current,
              total: dataSource?.total,
              pageSize: dataSource?.size,
              showTotal: (total) => {
                return <TotalButton>共{total}条记录</TotalButton>;
              },
              showQuickJumper: {
                goButton: <GoPageButton>确定</GoPageButton>,
              },
              showSizeChanger:
                dataSource?.showSizeChanger || dataSource?.pageSizeOptions
                  ? true
                  : false,
              pageSizeOptions: dataSource?.pageSizeOptions
                ? dataSource?.pageSizeOptions
                : [],
            }
      }
      scroll={scroll || { x: 1000 }}
      loading={loading}
      {...restProps}
    />
  );
};

export const FreeTable = styled(Content)`
  &.ant-table-wrapper {
    .ant-table-container {
      border: none !important;
    }
    ${list_table}
    ${table_header_center}
    .ant-table-column-sorter-full {
      padding-left: 8px;
      .ant-table-column-sorter-up {
        margin-bottom: -1px;
      }
    }
    .ant-table-column-sort {
      background-color: unset;
    }
    .ant-table-column-sorter-up.active,
    .ant-table-column-sorter-down.active {
      color: #8791a2;
    }
    .ant-table-column-sorter-down,
    .ant-table-column-sorter-up {
      color: #cdd1d9;
    }

    /* .ant-table-expanded-row-fixed {
      width: calc(100% - 40px) !important;
    } */

    .ant-pagination {
      margin-top: 9px !important;
      .ant-pagination-item,
      .ant-pagination-next,
      .ant-pagination-prev {
        height: 24px;
        min-width: 24px;
        line-height: 22px;
        .ant-pagination-item-link {
          &:hover {
            border-color: #1f51a4;
            color: #1f51a4;
          }
        }
      }

      .ant-pagination-item-active {
        border-color: #1f51a4;

        &:hover,
        &:focus {
          border-color: #1f51a4;
          color: #1f51a4;
        }

        > a {
          font-size: 13px;
          color: #1f51a4;

          &:hover {
            color: #1f51a4;
          }
        }
      }

      .ant-pagination-item {
        &:hover {
          border-color: #1f51a4;
          a {
            color: #1f51a4;
          }
        }
      }
      .ant-pagination-item a {
        color: #35425e;
      }

      // 分页跳转
      .ant-pagination-options-quick-jumper {
        height: 24px;
        line-height: 24px;
        font-size: 13px;
        color: #35425e;
        display: inline-flex;
        align-items: center;
        > input {
          height: 24px;
        }
        > span {
          display: inline-flex;
          height: 24px;
        }
      }

      .ant-pagination-item-link {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .ant-pagination-options {
      display: flex;
      align-items: center;
      .ant-select-selection-item {
        color: #35425e;
      }
      .ant-select.ant-select-single .ant-select-selector {
        height: 24px;
      }
    }
  }
`;

export default FreeTable;
